<template>
  <div class="recommonds">
    <div
      class="recommonds-item"
      v-for="(item, index) in recommend_list"
      :key="'recommends' + index"
    >
      <a :href="item.link">
        <img v-lazy="item.image" alt="" @load="imgLoad" />
        <span>{{ item.title }}</span>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    recommend_list: {
      type: Array,
      default() {
        return []
      },
    },
  },
  data() {
    return {
      emitLock: false,
    }
  },
  methods: {
    imgLoad() {
      if (!this.emitLock) {
        this.$emit('img-load-finished')
        this.emitLock = true
      }
    },
  },
}
</script>

<style lang="less" scoped>
.recommonds {
  display: flex;
  padding: 10px 0 20px 0;
  border-bottom: 10px solid #eeeeee;

  .recommonds-item {
    flex: 1;
    a {
      color: #666666;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      img {
        width: 68%;
        margin-bottom: 10px;
      }
      span {
        font-size: 14px;
      }
    }
  }
}
</style>
